<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 先加载vue源码，确保在自己的js之前 -->
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 2. 准备一个容器，vue负责管理这个容器 -->
    <div class="app">
        <!-- {{}} 叫插值表达式或者文本插值。作用：将变量、式子的计算结果展示在页面中-->
        <!-- 文本插值中可以写的内容：变量名、三元表达式、简单运算、函数 -->
        <!-- 扩充html，让他具有逻辑，可以有变量、可以循环、可以判断 -->
        <!-- 修改标签内容：文本插值 -->
        <!-- 修改标签属性：指令 -->
        <!-- 修改标签名称：组件 -->
        <p>姓名：{{person.name}}</p>
        <p>高寿：{{person.age}}</p>
        <p>头衔：{{person.title}}</p>
        <p>{{person.hasWude?'讲武德':'不讲武德'}}</p>
        <p>高考分数：{{getGkPoint()}}</p>
        <p>{{16-9}}</p>
        <hr>
        <input type="text" v-model="person.age">
        <p>{{person.age}}</p>
    </div>
    <!-- 3.写自己的js代码 -->
    <script>
        // 通过构造函数，实例化一个vue的实例，然后传参
        let vm = new Vue({
            el: '.app', // 挂载元素,这是vue的势力范围
            data: {// 数据，初始化数据，所有的响应式数据都要在这里注册
                person: {
                    name: 'Mabaoguo',
                    age: 70,
                    title: '掌门人',
                    hasWude: true
                }
            },
            // 所有的函数放在这里
            methods: {
                getGkPoint() {
                    return 750
                }
            }
        })
    </script>
</body>
</html>